<template>
  <div class="w-wrapper">
    <img src="@/assets/images/logo.png" alt="" class="logo" />
    <div class="main-content" >
      <div v-if="isRegist">
        <div class="top-bar">
          <span
            class="left"
            :class="{ isClick: this.click === 'login' }"
            @click="loginClick"
            >登录</span
          >
          <span
            class="right"
            :class="{ isClick: this.click === 'regist' }"
            @click="registClick"
            >注册</span
          >
        </div>
        <login
          v-if="this.click === 'login'"
          @toRegist="toRegist"
          @toForget="toForget"
        />
        <new v-else @successRegist="handleSuccessRegist" />
      </div>
      <new v-else :isRegist="isRegist" class="new"/>
    </div>
    
  </div>
</template>

<script>
import Login from "@/components/indexChilds/Login";
import New from "@/components/indexChilds/New";

export default {
  name: "Index",
  components: {
    Login,
    New,
  },
  data() {
    return {
      click: "login",
      isRegist: true,
    };
  },
  methods: {
    loginClick() {
      this.click = "login";
    },
    registClick() {
      this.click = "regist";
    },
    handleSuccessRegist() {
      this.click = "login";
    },
    toRegist() {
      this.click = "regist";
      this.isRegist = true;
    },
    toForget() {
      console.log("asdf");
      this.isRegist = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.w-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-image: url("../assets/images/zhihu.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgb(184, 229, 248);
  overflow: auto;
  .logo {
    width: 13rem;
    height: 8rem;
  }
  .main-content {
    position: relative;
    height: 40rem;
    width: 40rem;
    margin-top: 2.4rem;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(18, 18, 18, 0.1);
    padding: 0.5rem 2rem;
    .top-bar {
      margin-top: 1rem;
      height: 5rem;
      line-height: 5rem;
      span {
        display: inline-block;
        font-size: 1.8rem;
        margin-right: 3rem;
        cursor: pointer;
      }
    }
    .new {
      padding-top: 5rem;
    }
  }
}
.isClick {
  border-bottom: 0.5rem solid #0084ff;
  font-weight: bold;
}
</style>
